import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';

@Component({
  templateUrl: './card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [
    `
      .tab-header {
        width: 361px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .custom-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
      }
      .custom-item {
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #ccc;
        cursor: pointer;
      }
    `,
  ],
})
export class CardComponent {
  data = [
    { lvId: 11, icon: 'icon-copy', content: '001', title: 'Tag 001' },
    { lvId: 12, icon: 'icon-storage', content: '002', title: 'Tag 002' },
    { lvId: 13, icon: 'icon-data-center', content: '003', title: 'Tag 003' },
    { lvId: 14, icon: 'lv-icon-advanced-search', content: '004', title: 'Tag 004' },
    { lvId: 15, icon: 'lv-icon-filter', content: '005', title: 'Tag 005' },
    { lvId: 16, icon: 'lv-icon-card', content: '006', title: 'Tag 006' },
    { lvId: 17, icon: 'icon-storage', content: '007', title: 'Tag 007' },
    { lvId: 18, icon: 'lv-icon-filter', content: '008', title: 'Tag 008' },
    { lvId: 19, icon: 'icon-copy', content: '009', title: 'Tag 009' },
    { lvId: 10, icon: 'lv-icon-advanced-search', content: '010', title: 'Tag 010' },
    { lvId: 110, icon: 'icon-data-center', content: '011', title: 'Tag 011' },
    { lvId: 111, icon: 'lv-icon-card', content: '012', title: 'Tag 012' },
    { lvId: 112, icon: 'icon-copy', content: '013', title: 'Tag 013' },
    { lvId: 113, icon: 'lv-icon-filter', content: '014', title: 'Tag 014' },
    { lvId: 114, icon: 'lv-icon-advanced-search', content: '015', title: 'Tag 015' },
  ];

  @ViewChild('tabs', { static: false }) tabs;
  @ViewChild('customDropdown', { static: false }) customDropdown;
  constructor() {}

  getIcon(lvId: any): any {
    const foundItem = this.data.find((x) => x.lvId === lvId);
    return foundItem ? foundItem.icon : null;
  }

  itemClick(item): void {
    this.tabs.dropdownClick({ item });
  }
}
